<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="lib/vue.global.js"></script>
    <link rel="stylesheet" href="style.css" />
    <title>Vue 表单事件处理</title>
  </head>
  <body>
    <div id="app">
      <form @submit.prevent="handleSubmit">
        <label for="username">用户名：</label>
        <input id="username" type="text" v-model="username" />
        <label for="gender">性别：</label>
        <div id="gender" class="radio-group">
          <input
            name="gender"
            type="radio"
            value="male"
            v-model="gender"
          /><span>男</span>
          <input
            name="gender"
            type="radio"
            value="female"
            v-model="gender"
          /><span>女</span>
        </div>
        <label for="interest">兴趣：</label>
        <div id="interest" class="checkbox-group">
          <input
            type="checkbox"
            name="interests"
            value="frontend"
            v-model="interests"
          /><span>前端</span>
          <input
            type="checkbox"
            name="interests"
            value="backend"
            v-model="interests"
          /><span>后端</span>
          <input
            type="checkbox"
            name="interests"
            value="fullstack"
            v-model="interests"
          /><span>全栈</span>
        </div>
        <label for="occupation">职业：</label>
        <select
          name="occupation"
          id="occupation"
          v-model="occupation"
        >
          <option value="frontend">前端工程师</option>
          <option value="backend">后端工程师</option>
          <option value="fullstack">全栈工程师</option>
        </select>
        <label for="intro">自我介绍：</label>
        <textarea id="intro" rows="10" v-model="intro"></textarea>
        <button type="submit">提交</button>
      </form>
      <div class="result">
        <ul>
          <li>用户名： {{ username }}</li>
          <li>性别：{{ gender }}</li>
          <li>兴趣：{{ interests }}</li>
          <li>职业：{{ occupation }}</li>
          <li>自我介绍： {{ intro }}</li>
        </ul>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>
